<template>
  <div class="wrap">
     <tableTitle title="课程基本信息"></tableTitle>
    <div class="base_wrap">
      <div class="base_left">
        <el-form :model="courseForm" :rules="rules" label-width="100px" ref="courseForm" style="margin-top: 20px">
          <el-form-item label="课程名称" prop="Cname">
            <div style="display: flex;"> <el-input v-model="courseForm.Cname"></el-input> <span style="width:280px; margin-left: 40px;">60字内</span></div>
       
          </el-form-item>
          <el-form-item label="课程描述" prop="Cdescribe">
             <div style="display: flex;"> <el-input v-model="courseForm.Cdescribe"></el-input> <span style="width: 280px; margin-left: 40px;">100字内</span></div>
          </el-form-item>
           <el-form-item label="课程价格" prop="Cprice">
            <div style="display: flex;"> <el-input v-model="courseForm.Cprice"></el-input> <span style="width: 280px; margin-left: 40px;">以元单位，免费课为0</span></div>
          </el-form-item>
          <el-form-item label="专业选择">
            <div style="display: flex;">
                <el-select  v-model="courseForm.CategoryOne" style="width: 120px;" >
                  <el-option :key="item.label" v-for="item in opt1" :label="item.label" :value="item.value"></el-option>
                </el-select>
               <el-select v-model="courseForm.CategoryTwo" style="width: 120px; margin: 0 10px;"  >
                  <el-option :key="item.label" v-for="item in opt2" :label="item.label" :value="item.value"></el-option>
                </el-select>
                 <el-select v-model="courseForm.CategoryThree"  style="width: 120px;" >
                  <el-option :key="item.label" v-for="item in opt3" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </div>
          </el-form-item>
          <el-form-item > 
            <el-button type="success" @click="toSave">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="base_right">
        <div class="img_wrap">
          <div class="img_title">课程封面</div>
          <div class="img_con">
            <!-- 服务器地址 加 上传成功后返回的地址 -->
            <img :src="'http://127.0.0.1:3000'+courseForm.Cpic" alt="">
          </div>
          <div class="img_btn">
            <el-link type="warning">取消</el-link>
            <el-link type="success" @click="imgFlag=true">上传</el-link>
          </div>
        </div>
      </div>
    </div>
    <!-- 添加封面的弹出层 
     action 后台的接口地址
     :auto-upload="false" 关闭自动上传
      :on-success="uploadHandler"  自动上传 成功的回调
        :on-change="getFile" 文件选择变化 -->
     <el-dialog title="添加封面" :visible.sync="imgFlag">
        <el-upload
          class="avatar-uploader"
          
          action="/VueHandler/VueHandler/UpLoadPicHandler"
          :show-file-list="false"
          :auto-upload="false"
          :on-change="getFile"
          accept="image/*">
          <!-- 缩略图 -->
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <!-- 图标 -->
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <template #footer v-if="imageUrl">
          <div>
                <el-button type="primary" @click="toUpload">确定</el-button>
              <el-button type="danger" @click="close">取消</el-button>
          </div>
        </template>
     </el-dialog>
     <!-- 遮罩层  有ID就显示 -->
     <div class="cover" v-if="$route.query.ID"> </div>
  </div>
</template>
<script>
import cateMixins from '@/utils/cate'
// 导入课程封面上传接口 和课程添加接口
import {uploadImgApi,addCourseApi,getCourseByIdApi} from '@/api/course'
export default {
  mixins:[cateMixins],//混入课程专业分类数据
  data(){
    return {
      imgFlag:false,//控制弹出层显示隐藏
      imageUrl:"", //缩略图
      imgFile:"", //上传的文件
      courseForm:{ //数据绑定需要的 v-model的
        Cpic:"",//课程封面
        Cname:"",//课程名称
        Cdescribe:"",//课程描述
        Cprice:"",//课程价格
        CategoryOne:"",//专业分类1
        CategoryTwo:"",//专业分类2
        CategoryThree:""//专业分类3
      },
      rules:{ //验证
        Cname:[{required:true,message:"课程名称不能为空",trigger:"blur"},
          {min:1,max:60,message:"课程名称不能超过60字",trigger:"blur"}
        ],
        Cdescribe:[{required:true,message:"课程描述不能为空",trigger:"blur"}],
        Cprice:[{required:true,message:"课程价格不能为空",trigger:"blur"}],
        CategoryOne:[{required:true,message:"请选择专业分类",trigger:"change"}],
        CategoryTwo:[{required:true,message:"请选择专业分类",trigger:"change"}],
        CategoryThree:[{required:true,message:"请选择专业分类",trigger:"change"}],

      }
    }
  },
  created(){
    if(this.$route.query.ID){ //地址栏有ID 调用获取信息接口
      this.getBaseInfo();
    }
       
  },
  methods:{
   async getBaseInfo(){ //根据ID获取课程信息 并回显的接口

       let res=await getCourseByIdApi(this.$route.query.ID)
       console.log(res,"根据ID获取课程信息")
       this.courseForm.CategoryOne=res.data.courselist.CategoryOne
       this.courseForm.CategoryTwo=res.data.courselist.CategoryTwo
       this.courseForm.CategoryThree=res.data.courselist.CategoryThree
       this.courseForm.Cname=res.data.courselist.Cname
       this.courseForm.Cdescribe=res.data.courselist.Cdescribe
       this.courseForm.Cprice=res.data.courselist.Cprice
       this.courseForm.Cpic=res.data.courselist.Cpic
      // 获取到的目录列表 发给兄弟组件
      this.$bus.$emit("sendDir",res.data.dirlist)
      // 获取到的课程基本信息里面 Cdetails 富文本回显用的数据
      // 传给父组件
      this.$emit("sendDetail",res.data.courselist.Cdetails)
    },
    toSave(){//添加接口
      this.$refs.courseForm.validate(async (vali)=>{
        if(vali){
          // 添加课程接口
          if(this.courseForm.Cpic){
             let res=await addCourseApi(this.courseForm)
             console.log(res,"添加课程接口")
             if(res.success){
               this.$message.success("添加课程成功")
              //  添加课程成功后返回了 课程的信息和
              // 课程ID 和课程的_id
              this.$router.push({
                name:"courseadd",
                query:{
                  _id:res._id,
                  ID:res.ID
                }
              })
             }
          }else{
            this.$message.error("请上传课程封面")
          }
       
        }
        
      })
       
    },
    uploadHandler(res,file){ //on-sucess触发
      console.log(res,file,"---------后台返回的数据")
     
    },
    getFile(file){ //on-change触发    
        // 原生  e.target.files[0]
        //el-upload  file.raw
        console.log(file)
        // 使用选择的文件制作缩略图
        this.imageUrl = URL.createObjectURL(file.raw)
        this.imgFile= file.raw //存储选中的文件
      
    },
    async toUpload(){ //点击确定触发
      // 把选中的文件 放到formdata中 传给后台
      let formdata=new FormData()
      formdata.append(""+new Date().getTime(),this.imgFile) //添加选中的文件
        let res=await uploadImgApi(formdata)
        console.log(res,"上传的图片封面接口")
        this.courseForm.Cpic=res.cacheName //把后台返回的图片地址赋值给courseForm
        this.imgFlag=false //关闭弹出层
    },
    close(){ //关闭弹出层
      this.imageUrl=""
      this.imgFlag=false;
    }
  }

}
</script>
<style lang="scss" scoped>
    .base_wrap{
      width: 100%;
      display: flex;
      height: 450px;

      .base_left{
        width: 60%;
        margin-right: 3%;

             height: 450px;
        color:white;
      }
      .base_right{
        width: 37%;
   
             height: 450px;
        .img_wrap{
           width: 280px;
           height: 310px;
         margin-top: 20px;
           .img_title{
            color: white;
            font-size: 25px;
           }
           img{
            width: 280px;
            height: 280px;
             border: 2px solid white;
           }
           .img_btn{
            display: flex;
            justify-content: space-between;
           }
        }
      }
    }
    ::v-deep .el-form-item__label{
      color:white !important;
    }
     .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .wrap{
    position: relative;
    .cover{
      width: 100%;
       height: 450px;
     background: rgba(0,0,0,0.5);
     position: absolute;
     left: 0;
     top:0;
     
    }
  }
</style>